<template> 
    <el-header class="header">
      <Condition @search="gosearch" v-if="PCboole"></Condition>
      <conditionM  @search="gosearch" v-else></conditionM>
    </el-header>
      <el-main>
      <div class="main" v-auth="['activity-ironshelf-totality']">
      <labelName :title="'总体情况'" ></labelName>
        <el-row :gutter="24">
             <el-col
                v-for="(item,index) in list" :key="index"
                 :lg="6"
            >
                  <Card :data="item"></Card>
             </el-col>
               </el-row>
              <chartCard height="328px" :title="'活动类型对比趋势'" :echartsData="echartsTotality"></chartCard>
         </div>
            <div class="main" v-auth="['activity-ironshelf-area']">
              <labelName :title="'区域维度'" ></labelName>
              <areaTable :tableData="regionalList"></areaTable>
         </div>
           <div class="main"  v-auth="['activity-ironshelf-product']">
              <labelName :title="'产品维度'" ></labelName>
              <chartCard  height="328px" padding="0 20px 20px 20px" :title="'产品大类情况'" :echartsData="echartsProduct"></chartCard>
              <productTable style="margin-top: 30px;"  :tableData="ProductBroad"></productTable>
              <div style="margin-top: 30px;">
                     <el-row :gutter="24">
                 <el-col
                  :lg="8"
                      >
                 <chartCard  height="380px" :title="'战略品种（金额）'" :echartsData="echartsStrategic"></chartCard>
                  </el-col>
                 <el-col
                  :lg="16"
                      >
                 <chartCard  height="380px" :title="'战略品种增长率'" :echartsData="echartsIncrease"></chartCard>
                  </el-col>
               </el-row>
              </div>
         </div>
          <div class="main" v-auth="['activity-ironshelf-client']">
              <labelName :title="'客户维度'"></labelName>
              <!-- <div class="tag-board">
                    <span>{{client}}</span>
              </div> -->
              <clientTable :client="client" :tableData="clientList"></clientTable>
         </div>
          <!-- <div class="main">
              <labelName :title="'医疗终端覆盖'"></labelName>
              <div style="margin-top: 30px;"> 
                     <el-row :gutter="24">
                 <el-col
                  :lg="10"
                  :style=" ' margin-left:'+cardleft"
                      >
                 <chartCard  height="320px" :title="'战略品种（金额）'" :echartsData="echartsTerminal"></chartCard>
                  </el-col>
                   <el-col
                   :style=" ' margin-top:'+ cardTop"
                  :lg="6"
                      >
                      <Card></Card>
                 </el-col>
                  <el-col
                    :style=" ' margin-top:'+ cardTop"
                  :lg="6"
                      >
                      <Card></Card>
                 </el-col>
               </el-row>
              </div>
              <medicalTable style=" margin-top:15px"></medicalTable>
         </div> -->
      </el-main>

</template>
<script>
import Card from '../../components/card.vue'
import Condition from '../../components/condition.vue'
import conditionM from '../../components/conditionM.vue'
import labelName from '../../components/labelname.vue'
import chartCard from '../../components/chartcard.vue'
import areaTable from '../../components/areaTable'
import productTable from '../../components/productTable'
import clientTable from '../../components/clientTable'
// import medicalTable from '../../components/medicalTable'

import * as echarts from "echarts";
export default {
	name: 'KA',
	data() {
		return {
      // 权限显隐
      // 总体情况
      overallsituation:false,
      // 区域维度
      regionalDimension:false,
      // 产品维度
      ProductDimension:false,
      // 客户维度
      customerDimension:false,
            PCboole:true,
      // 列表数据
      // 区域维度
      regionalList:[],
      // 产品维度
      ProductBroad:[],
      // 客户维度
      clientList:[],
      // 
      client:'铁架子客户',
      cardTop:'140px',
      cardleft:'30px',
      // 总体情况
      echartsTotality: {
                color: ["#003366", "#006699", "#4cabce", "#e5323e"],
                  tooltip: {
                trigger: "axis",
              axisPointer: {
                 type: "shadow"
                },
      valueFormatter:function(value){
             return value + '万'
           }
             },
        dataset: {
        source: [
      //  ["type", "上量/动销", "客户培训类", "布货活动", "客户会议类", "协议费",'客户赞助类','数字化创新'],
      //  ["上期", 320, 332, 301, 334, 390,200,100],
      //  ["本期", 220, 182, 191, 234, 290,355,402],
    ]
  },
  legend: {
        data: ['上期', '本期'],
        left: '120',
        textStyle:{
            fontSize:'1.3rem'
        }
        // top:'-20px'
  },
  xAxis: {
    type: "category",
    axisTick: {
      show: false
    },
     
      axisLabel:{
       show: true,
    //    interval: 0,// 使x
            	color: '#666666',
            	margin: 20,
            	fontSize: '1.5rem'
     },
      },
     yAxis: {
       name:'费用投入',
       nameTextStyle: {
       fontSize: '1.5rem',
       color:'#666666',
       align:'center',
       verticalAlign:'bottom',
       lineHeight:28,
        padding:[0,0,0,0]
    },
          axisLabel:{
            show: true,
     //    interval: 0,// 使x
            	color: '#666666',
            	margin: 10,
            	fontSize:'1.3rem'
             },
  },

  series: [{
    type: "bar",
    seriesLayoutBy: "row",
    barWidth: this.fontSize(40),
    itemStyle:{
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#85A7FF' },  //开始的颜色
         { offset: 0, color: '#656EFF' }  //结束的颜色
        ]),
    }
  }, {
         type: "bar",
         seriesLayoutBy: "row",
         barWidth: this.fontSize(40),
         itemStyle:{
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#FF9423'},  //开始的颜色
         { offset: 0, color: '#FAE994' }  //结束的颜色
          ]),
        }
       }]
			},
      // 产品维度
      echartsProduct:{
                color: ["#003366", "#006699", "#4cabce", "#e5323e"],
                  tooltip: {
                trigger: "axis",
              axisPointer: {
                 type: "shadow"
                },
                        valueFormatter:function(value){
      return  '销售金额' + '' + value + '万'
    }
                
             },
  //       dataset: {
  //       source: [
  //      ["type", "胃药类", "皮肤类", "感冒类", "其他类",],
  //           ["胃药类", 320,],
  //           ["皮肤类", 220,],
  //           ["感冒类", 220,],
  //           ["其他类", 220,],
  //        ]
  // },
  legend: {
        // data: [{name:'胃药类'},{name:'皮肤类'},{name:'感冒类'},{name:'其他类'}],
        left: '140',
        textStyle:{
            fontSize:'1.3rem'
        }
        // top:'-20px'
  },
   grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: "category",
     data: ["胃药类", "皮肤类", "感冒类", "其他类",],
    axisTick: {
      show: false
    },
     
      axisLabel:{
       show: true,
    //    interval: 0,// 使x
            	color: '#666666',
            	margin: 20,
            	fontSize: '1.5rem'
     },
      },
     yAxis: {
       name:'',
       nameTextStyle: {
       fontSize: '1.5rem',
       color:'#666666',
       align:'center',
       verticalAlign:'bottom',
       lineHeight:28,
        padding:[0,0,0,0]
    },
          axisLabel:{
            show: true,
     //    interval: 0,// 使x
            	color: '#666666',
            	margin: 10,
            	fontSize:'1.3rem'
             },
  },

  series: [{
    type: "bar",
    seriesLayoutBy: "row",
    data: [{
          name:'胃药类',
          value: 200,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#FF9423'},  //开始的颜色
         { offset: 0, color: '#FAE994' }  //结束的颜色
          ]),
          }
        },{
          name:'皮肤类',
          value: 200,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#656EFF'},  //开始的颜色
         { offset: 0, color: '#85A7FF' }  //结束的颜色
          ]),
          }
        },{
          name:'感冒类',
          value: 200,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#02E8D9'},  //开始的颜色
         { offset: 0, color: '#9EFBFE' }  //结束的颜色
          ]),
          }
        },{
          name:'其他类',
          value: 200,
       itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#A2BEFF'},  //开始的颜色
         { offset: 0, color: '#CEDCFF' }  //结束的颜色
          ]),
          }
        }],
    barWidth: this.fontSize(40),
  },
  ]
      },
      // 战略品种（金额）
      echartsStrategic:{
                color: ["#FCA169", "#D770ED", "#67DAA8", "#8CA3FF"],
  tooltip: {
    trigger: 'item',
        valueFormatter:function(value){
      return value + '万'
    }
  },
  legend: {
    // orient: 'vertical',
    left:'00%',
    top:'top',
    width:this.fontSize(400),
      data: [
    {
      name: '基石产品',
      icon: 'circle',
    },
    {
      name: '成长产品',
      icon: 'circle',
    },
        {
      name: '孵化产品',
      icon: 'circle',
    },    {
      name: '其他产品',
      icon: 'circle',
    },
  ],
        textStyle:{
            color:'#666',
            fontSize:'1.3rem',
            lineHeight:this.fontSize(30),
        }
        // top:'-20px'
  },
   grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
      },
     yAxis: {
  },

  series: [{
    type: "pie",
    seriesLayoutBy: "row",
    right: this.fontSize(140),
    top: 40,
    label:{
      show:true,
      position:'inner',
      formatter: '{d}%',
      color:'#ffffff',
      fontSize: '1.3rem'
    },
    avoidLabelOverlap:false,
     labelLine: {
        show: false
      },
    radius: ['0%', '80%'],
    data: [ { value: 1048, name: '基石产品' },
        { value: 735, name: '成长产品' },
        { value: 580, name: '孵化产品' },
        { value: 484, name: '其他产品' },
        ],
    barWidth: this.fontSize(40),
  },
  ]
      },
      // 战略品种增长率
      echartsIncrease:{
                color: ["#FCA169", "#D770ED", "#67DAA8", "#8CA3FF"],
                  tooltip: {
    trigger: 'axis',
    valueFormatter:function(value){
      return value + '%'
    }
  },
  legend: {
    // orient: 'vertical',
    left:'0',
    top:'0',
      data: [
  ],
        textStyle:{
            color:'#666',
            fontSize:'1.3rem',
            lineHeight:this.fontSize(30),
        }
        // top:'-20px'
  },
   grid: {
     top:'16%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
        type: "category",
     data: ["1月", "2月", "3月", "4月",'5月','6月','7月','8月','9月','10月','11月','12月'],
    axisTick: {
      show: false
    },
     
      axisLabel:{
       show: true,
    //    interval: 0,// 使x
            	color: '#666666',
            	margin: 20,
            	fontSize: '1.5rem'
     },
      },
     yAxis: {
  },
  series: []
      },
      // 终端覆盖分类占比
            echartsTerminal:{
                color: ["#FCA169", "#D770ED", "#67DAA8", "#8CA3FF"],
  tooltip: {
    trigger: 'item',
    formatter:'{b}<br />{d}%'
  },
  legend: {
    // orient: 'vertical',
    // right:'',
    left:'0%',
    top:'top',
      data: [
    {
      name: '基石产品',
      icon: 'circle',
    },
    {
      name: '成长产品',
      icon: 'circle',
    }
  ],
        textStyle:{
            color:'#666',
            fontSize:'1.3rem',
            lineHeight:this.fontSize(30),
        }
        // top:'-20px'
  },
   grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
      },
     yAxis: {
  },

  series: [{
    type: "pie",
    seriesLayoutBy: "row",
    right: this.fontSize(120),
    label:{
            normal: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                formatter: '{total|总数}'+ '\n\r' + '{active|3430}'+' '+"{family|家}",
                rich: {
                    total:{
                        fontSize: '1.5rem',
                        fontFamily : "微软雅黑",
                         color:'#666666',
                           lineHeight:40,
                    },
                    active: {
                        fontFamily : "微软雅黑",
                        fontSize: '2.3rem',
                        color:'#6c7a89',
                        lineHeight:30,
                    },
                    family:{
                       fontFamily : "微软雅黑",
                        fontSize:'1.3rem',
                        color:'#666666',
                        lineHeight:22,
                    }
                }
            },
            emphasis: {//中间文字显示
                show: true,
            }
    },
    avoidLabelOverlap:false,
     labelLine: {
        show: false
      },
    radius: ['40%', '70%'],
    // center: ['50%', '40%'],
    data: [ { value: 1048, name: '基石产品' },
        { value: 735, name: '成长产品' }
        ],
    barWidth: this.fontSize(40),
  },
  ]
      },
      // 总体情况card
      list:[],
      // 搜索条件
      form: {
        startTime:'',
				endTime:'',
        areaIds:[],
			},
		}
	},
    components:{
         Card,
         Condition,
         labelName,
         chartCard,
         areaTable,
         productTable,
         clientTable,
         conditionM
        //  medicalTable
    },
    created(){
       this.dataPermission()
            if (window.screen.width < 900) { 
              this.cardTop = '20px'
              this.cardleft = '0px'
              this.PCboole = false
             }else{
                this.cardTop = '11.6rem'
                 this.cardleft = '2.5rem'
                  this.PCboole = true
             }
    },
  mounted(){
    window.addEventListener('resize', () => {
            if (window.screen.width < 900) { 
              this.cardTop = '20px'
              this.cardleft = '0px'
              this.PCboole = false
             }else{
                this.cardTop = '11.6rem'
                 this.cardleft = '2.5rem'
                  this.PCboole = true
             }
    })
  },
	methods: {
  //  图表样式
  fontSize(res){
	const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	if (!clientWidth) return;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
     	},
    routes(){
      let arr = []
      var route = this.$route.matched[this.$route.matched.length-1];
      console.log(route.meta.breadcrumb[route.meta.breadcrumb.length-1].children)
      route.meta.breadcrumb[route.meta.breadcrumb.length-1].children.forEach(item => {
          arr.push(item.meta.title)
      });
      return arr
    },
         
    dataPermission(){
        console.log(this.routes())
                    this.overallsituation = true
                this.generalConditionList()
                       this.regionalDimension = true
                this.areaConditionList()
                     this.ProductDimension = true
                this.productConditionList()
               this.customerDimension = true
                this.customersList()
        // this.routes().forEach(item=>{
        //   if(item === '总体情况'){
        //         this.overallsituation = true
        //         this.generalConditionList()
        //   }
        //   if(item === '区域维度'){
        //         this.regionalDimension = true
        //         this.areaConditionList()
        //   }
        //   if(item === '产品维度'){
        //         this.ProductDimension = true
        //         this.productConditionList()
        //   }
        //   if(item === '客户维度'){
        //         this.customerDimension = false
        //         this.customersList()
        //   }
          
        // })
    },
    // 搜索
    gosearch(data){
      this.form.startTime = data.startTime
      this.form.endTime = data.endTime
      this.form.areaIds = data.areaIds
      this.dataPermission()
    },
    // //总体情况时间切换
    // overallsituationSwitch(data){
    //   this.form.generalConditionTimeType = data
    //   this.generalConditionList()
    // },
    // // 区域维度时间切换
    // regionalDimensionSwitch(data){
    //   this.form.areaConditionTimeType = data
    //   this.areaConditionList()
    // },
    // // 产品维度时间切换
    // ProductDimensionSwitch(data){
    //   this.form.productConditionTimeType = data
    //   this.productConditionList()
    // },
    // // 客户维度时间切换
    // customerDimensionSwitch(data){
    //   this.form.customersTimeType = data
    //   this.customersList()
    // },
    // 总体情况接口请求数据处理
    generalConditionList(){
     let data =  this.$API.ActivityOverview.direct.generalConditionList.post({data:this.form})
      data.then(res=>{
        console.log(res)
        if(res.code=='0'){
          this.list = res.data.yearOnYears
           let arr = []
           let arr1 = ['type']
           let arr2 = ['上期']
           let arr3 = ['本期']
          if( res.data.typeVersusTrends.length>0){
             res.data.typeVersusTrends.forEach(item=>{
                arr1.push(item.name)
                arr2.push(item.previousPeriod)
                arr3.push(item.currentPeriod)
             })
          }
           arr.push(arr1)
           arr.push(arr2)
           arr.push(arr3)
           console.log(arr)
          this.echartsTotality.dataset.source = arr
        }
      })
    },
    // 区域维度接口请求数据处理
    areaConditionList(){
     let data =  this.$API.ActivityOverview.direct.areaConditionList.post({data:this.form})
           data.then(res=>{
             if(res.code=='0'){
                  this.regionalList = res.data
                  console.log(this.regionalList)
             }
           })
    },
    // 产品维度接口请求数据处理
    productConditionList(){
     let data =  this.$API.ActivityOverview.direct.productConditionList.post({data:this.form})
     console.log(data)
     data.then(res=>{
          if(res.code=='0'){
                  // this.regionalList = res.data
                  // console.log(res.data)
                  this.ProductBroad = res.data.infoSituations
                  if(res.data.categorySituations.length>0){
                    let arr = []
                    res.data.categorySituations.forEach((item,index)=>{
                         arr.push(item.name)
                        this.echartsProduct.series[0].data[index].name = item.name 
                        this.echartsProduct.series[0].data[index].value = item.salesAmount 
                   })
                   this.echartsProduct.xAxis.data = arr
                  }
                  if(res.data.strategicVarietySituations.length>0){
                    //  echartsStrategic.series.data
                    let arr = []
                    let arr1 = []
                    res.data.strategicVarietySituations.forEach((item,index)=>{
                              let obj = {
                                      name: item.name,
                                      icon: 'circle',
                                }
                               let obj1 = {
                                      name: item.name,
                                      value: item.quantity,
                                }
                                arr.push(obj)
                                arr1.push(obj1)
                    })
                     
                     this.echartsStrategic.legend.data = arr
                     this.echartsStrategic.series[0].data = arr1
                      this.echartsStrategic = {... this.echartsStrategic}
                  }
                   if(res.data.growthRateSituations.length>0){
                    //  echartsStrategic.series.data
                    let arr = []
                    let arr1 = []
                    res.data.growthRateSituations.forEach((item,index)=>{
                              let obj = {
                                      name: item.name,
                                      icon: 'circle',
                                }
                               
                            let obj1 =  {
                                     name: item.name,
                                   type: "line",
                                   seriesLayoutBy: "row",
                                   label:{
                                   show:false,
                                     },
                                  avoidLabelOverlap:false,
                                  labelLine: {
                                   show: false
                                      },
                                  symbol:'none',
                                  smooth: true,
                                  data: item.strategicVarieties,
                                  }
                                  arr.push(obj)
                                  arr1.push(obj1)
                          })
                          this.echartsIncrease.legend.data = arr
                           this.echartsIncrease.series = arr1
                    
                  }
                   
                 
         }
     })
    },
    // 客户维度接口请求数据处理
    customersList(){
     let data =  this.$API.ActivityOverview.commercial.ironFrameCustomers.post({data:this.form})
     data.then(res=>{
       if(res.code=="0"){
         this.clientList = res.data
       }
     })
    },
	}
}
</script>
<style scoped>
.el-main{
  padding: 5px !important;
}
.box-card{
    padding: 30px;
}
.header{
    width: 100%;
    min-height:72px;
    display: flex;
}
.main{
  padding: 15px 15px 0px 15px;
}   
.el-header{
--el-header-height:none;

}
.tag-board{
width: 140px;
height: 61px;
background: #FFFFFF;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid #E7E7E7;
  display: flex;
  justify-content: center;
  align-items: center;
font-size: 20px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #333333;
line-height: 22px;
}
.card-box{
  /* display: flex;
  width: 100%;
  height: 100%;
  align-items: center; */
    width: 100%;
  height: 200px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.card-bigBox{
  margin-top: 140px;
    /* width: 100%;
  height: 100%;
  position: relative; */
   /* width: 100%;
  height:100%;
  display: flex; */
}
</style>